# Ultimate Layouts

## Responsive Grid - Addon For WPBakery Page Builder

- created: 08/11/2016
- latest update: 05/07/2017
- by: BeeTeam368
- beeteam368.com/ultimate-layouts
- email: support@beeteam368.com

Thank you for purchasing my plugin. If you have any questions that are beyond the scope of this help file, please feel free to email via support tab. Thanks so much!

### Configuration

1. Go to your WordPress admin panel and navigate to Plugins -> Add New.
2. Click “Upload” and then Upload.
3. Select the archive “ultimate-layouts-vc-vX.x.x.zip” and click “Install Now”.
4. Activate the Ultimate Layouts - Responsive Grid – Addon For WPBakery Page Builder plugin by clicking “Activate” button.

### Basic Structure

### Add Layout Container To WPBakery Page Builder

You can watch video tutorials here: https://www.youtube.com/watch?v=jti4SrdtPYE

##### Step 1:

##### Step 2:

### Grid

"Grid" allows up to 12 columns across the page.
Supports 04 types of filters: Inline Buttons, Dropdown List, Smart Tabs, Sorting block.
Pagination: Page Numbers, Loadmore Button & Infinite Scroll.

##### Styles and Layouts:

1. AFRICAN LILY -> View Demo
2. ALPINE THISTLE -> View Demo
   Equal Height:
3. AMARYLLIS -> View Demo
4. AMAZON LILY -> View Demo
5. ARUM LILY -> View Demo
6. BABY’S BREATH -> View Demo
7. BARBERTON -> View Demo
8. CHRISTMAS ROSE -> View Demo
9. GRID & LIST TOOGLE -> View Demo

##### Styles and Layouts (MASONRY):

1. AFRICAN LILY -> View Demo
2. ALPINE THISTLE -> View Demo
3. AMARYLLIS -> View Demo
4. AMAZON LILY -> View Demo
5. ARUM LILY -> View Demo
6. CHRISTMAS ROSE -> View Demo

##### Layout Settings:

### Carousel Traditional

"Carousel Traditional" allows up to 12 columns across the page.
"Filter" is not supported.
"Pagination" is not supported.

##### Styles and Layouts:

1. BIRD OF PARADISE -> View Demo
2. BLEEDING HEART -> View Demo
3. BLOOM -> View Demo
4. BLUE THROATWORT -> View Demo
5. BROOM -> View Demo
6. BUSY LIZZIE -> View Demo

##### Layout Settings - Refer: CLICK HERE

##### Carousel Settings:

### Carousel Free

"Carousel Free" does not support custom columns.
"Filter" is not supported.
"Pagination" is not supported.

##### Styles and Layouts:

1. CALLA LILY -> View Demo

##### Layout Settings - Refer: CLICK HERE

##### Carousel Settings:

### Content Blocks

"Content Blocks" does not support custom columns.
Supports 03 types of filters: Inline Buttons, Dropdown List, Smart Tabs.
Pagination: Next/Prev (button).

##### Styles and Layouts:

1. CONEFLOWER -> View Demo
2. DAFFODIL -> View Demo
3. EVENING PRIMROSE -> View Demo
4. FEVERFEW -> View Demo
5. FLAME TIP -> View Demo
6. FLAMINGO FLOWER -> View Demo
7. FORGET ME NOT -> View Demo
8. FOXGLOVE -> View Demo
9. GAY FEATHER -> View Demo
10. GLOBE THISTLE -> View Demo
11. GOLDEN ROD -> View Demo
12. GRAPE HYACINTH -> View Demo
13. GUERNSEY LILY -> View Demo
14. HYACINTH -> View Demo
15. IRIS -> View Demo
16. JERSEY LILY -> View Demo
17. LADY’S MANTLE -> View Demo
18. LARKSPUR -> View Demo
19. LAVENDER -> View Demo
20. LILAC -> View Demo
21. LILY -> View Demo
22. LISIANTHUS -> View Demo
23. LOBSTER CLAW -> View Demo
24. LOVE IN A MIST -> View Demo
25. SEA LAVENDER -> View Demo
26. SEPTEMBER FLOWER -> View Demo
27. SNAPDRAGON -> View Demo
28. TRANSVAAL DAISY -> View Demo

##### Big Item Settings - Refer: CLICK HERE

##### Small Item Settings:

### List

"List" does not support custom columns.
Supports 04 types of filters: Inline Buttons, Dropdown List, Smart Tabs, Sorting block.
Pagination: Page Numbers, Loadmore Button & Infinite Scroll.

##### Styles and Layouts:

1. CORNFLOWER -> View Demo
2. MIMOSA -> View Demo
3. MOTH ORCHID -> View Demo
4. MUMS -> View Demo
5. PEONY -> View Demo
6. PERUVIAN LILY -> View Demo
7. CANTERBURY BELLS -> View Demo
8. BELLS OF IRELAND -> View Demo
9. MARIGOLD -> View Demo
10. MICHAELMAS DAISY -> View Demo

##### Layout Settings - Refer: CLICK HERE

### Creative

"Creative" does not support custom columns.
Supports 04 types of filters: Inline Buttons, Dropdown List, Smart Tabs, Sorting block.
Pagination: Page Numbers, Loadmore Button & Infinite Scroll.

##### Styles and Layouts:

1. PRAIRIE GENTIAN -> View Demo
2. ROSE -> View Demo
3. SCABIOUS -> View Demo

##### Layout Settings - Refer: CLICK HERE

##### Content Settings

### Timeline

"Timeline" does not support custom columns.
Supports 04 types of filters: Inline Buttons, Dropdown List, Smart Tabs, Sorting block.
Pagination: Page Numbers, Loadmore Button & Infinite Scroll.

##### Styles and Layouts:

1. CLIMBING ROSE -> View Demo
2. MILK FLOWER -> View Demo

##### Layout Settings - Refer: CLICK HERE

### Gallery Button

##### Styles and Layouts:

1. BUTTON GALLERY -> View Demo

##### STEP 1:

##### STEP 2:

### Quick View

##### STEP 1 - Enabled:

##### STEP 2 - Set up the elements:

### Query Builder

You can use this tool to set and refine the initial display data for the layout.
To properly display filters, you need to specifically declare post types as well as taxonomies.

1. Single Post Type
2. Single Taxonomy
3. Multiple Post Types
4. Multiple Taxonomies
5. Query Type 1: INCLUDE categories, tags, taxonomies...
6. Query Type 2: EXCLUDE categories, tags, taxonomies...
7. Query Type 3: INCLUDE Posts/Pages/Custom Post Types...
8. Query Type 4: INCLUDE and EXCLUDE categories, tags, taxonomies...
9. Post Count ( Set max limit for items in grid or enter -1 to display all. If blank, defaults to: 50 )
10. Items per page ( Number of items to show per page. If blank, defaults to: 10 )
11. Order Type & Sorting Order
12. The whole tool is based on the features and code provided by Wordpress, if you are a developer, please refer to here: https://gist.github.com/luetkemj/2023628

### Filter Settings

To make it easy for users to find the relevant data for each category or taxonomy, you need to use the following tools to set up.

##### Add Filter Container:

You can watch video tutorials here: https://www.youtube.com/watch?v=FwtaFBTlJdw

##### Filter Settings:

1. Filter: Inline Button -> View Demo
2. Filter: Dropdown List -> View Demo
3. Filter: Smart Tab -> View Demo
4. Filter: Dropdown List ( Sub Terms ) -> View Demo
5. Filter: Dropdown List ( MULTIPLE TAXONOMIES FILTER ) -> View Demo
6. Hashtag Filter -> View Demo
7. Sort Order - Designates the ascending or descending order of the "orderby" parameter Settings
8. Order - Sort retrieved posts by parameter Settings
9. The whole tool is based on the features and code provided by Wordpress, if you are a developer, please refer to here: https://gist.github.com/luetkemj/2023628 .

### Filter Items Settings

You enter here categories or taxonomies, they will be listed on the filter.

### WooCommerce

This is a group of options for the layout displays the products from plugin WooCommerce.

### Video Lightbox

Update Video Source For Post or Custom Post Type:

Configuration for WPBakery Page Builder:

If you already have a post meta containing video source, do the following:

### Term/Category Color

Change Category or Taxonomy color & background:

Configuration for WPBakery Page Builder:

Image Hover Overlay background:

### Custom Colors

### Custom Fonts

### Enabled Right To Left (RTL)

### Image Sizes Settings

Image sizes are generated when you upload new images in Wordpress. So, if you want to use one of the image size set in Global options with images uploaded before installing Ultimate Layouts then you must regenerate them. You can use a plugin like Regenerate Thumbnail to regenerate all image sizes.

### Custom Template (For Developers)

1. STEP 1: Create a folder in your theme with the name: ul-templates
2. STEP 2: Copy the entire directory containing the source code (the structure of each item layout) and move to the newly created folder ( ul-templates )
   COPY:
   AND PASTE:
3. STEP 3: Take a look at the structure of the layouts and edit them the way you want. Observe and study the source code carefully, avoiding unnecessary errors.

### Typography [Custom CSS Code For Developers]

        /*title font custom*/
            html body .ultimate-layouts-container h3.ultimate-layouts-title,
            html body .ultimate-layouts-container h3.ultimate-layouts-title a{
                /*title font properties*/
            }

            /*quick view*/
                html body .ul-quick-view-style h3.ultimate-layouts-title,
                html body .ul-quick-view-style h3.ultimate-layouts-title a{
                    /*title font properties for quick view*/
                }
            /*quick view*/
        /*title font custom*/

        /*meta font custom*/
            html body .ultimate-layouts-container .ultimate-layouts-metas>.ultimate-layouts-metas-wrap>*,
            html body .ultimate-layouts-container .ultimate-layouts-metas-st2>.ultimate-layouts-metas-wrap>*,
            html body .ultimate-layouts-container .ultimate-layouts-metas a,
            html body .ultimate-layouts-container .ultimate-layouts-metas-st2 a,
            html body .ultimate-layouts-container .ultimate-layouts-categories>a,
            html body .ultimate-layouts-container .ultimate-layouts-metas>.ultimate-layouts-metas-wrap>* .ldc-ul_cont span,
            html body .ultimate-layouts-container .ultimate-layouts-metas-st2>.ultimate-layouts-metas-wrap>* .ldc-ul_cont span,
            html body .ul-quick-view-style .ultimate-layouts-metas>.ultimate-layouts-metas-wrap>*,
            html body .ul-quick-view-style .ultimate-layouts-metas a,
            html body .ul-quick-view-style .ultimate-layouts-categories>a,
            html body .ul-quick-view-style .ultimate-layouts-metas>.ultimate-layouts-metas-wrap>* .ldc-ul_cont span,
            html body .ul-quick-view-style .ultimate-layouts-metas-st2>.ultimate-layouts-metas-wrap>* .ldc-ul_cont span{
                /*meta font properties*/
            }

            /*font icon for post meta*/
                html body .ultimate-layouts-container .ultimate-layouts-metas-st2>.ultimate-layouts-metas-wrap>* i.fa,
                html body .ultimate-layouts-container .ultimate-layouts-metas>.ultimate-layouts-metas-wrap>* .ldc-ul_cont span:before,
                html body .ultimate-layouts-container .ultimate-layouts-metas-st2>.ultimate-layouts-metas-wrap>* .ldc-ul_cont span:before,
                html body .ul-quick-view-style .ultimate-layouts-metas-st2>.ultimate-layouts-metas-wrap>* i.fa,
                html body .ul-quick-view-style .ultimate-layouts-metas>.ultimate-layouts-metas-wrap>* .ldc-ul_cont span:before,
                html body .ul-quick-view-style .ultimate-layouts-metas-st2>.ultimate-layouts-metas-wrap>* .ldc-ul_cont span:before{
                    /*meta font icon properties (font awesome)*/
                }
            /*font icon for post meta*/
        /*meta font custom*/

        /*Main font*/
            html body .ultimate-layouts-container .ultimate-layouts-excerpt,'.
            html body .ultimate-layouts-container .ultimate-layouts-excerpt p,
            html body .ul-quick-view-style .ul-quick-view-content .ul-quick-view-body .ul-single-post-content,
            html body .ul-quick-view-style .ul-quick-view-content .ul-quick-view-body .ul-single-post-content p{
                /*main font properties*/
            }
        /*Main font*/

        /*filter font custom*/
            html body .ultimate-layouts-container .ultimate-layouts-filter-container .ultimate-layouts-sc-filter-container .ultimate-layouts-filter-item{
                /*filter font properties*/
            }
        /*filter font custom*/

        /*tab font custom*/
            html body .ultimate-layouts-container .ultimate-layouts-filter-container .ul-smart-tab-filter .ul-smart-tab-title-wrap .ul-smart-tab-title{
                /*tab font properties (for filter smartTab)*/
            }
        /*tab font custom*/

        /*pagination font custom*/
            html body .ultimate-layouts-container .ul-pagination-wrap .ul-loadmore-style,
            html body .ultimate-layouts-container .ul-pagination-wrap .ul-page-numbers .paginationjs .paginationjs-pages ul li>a {
                /*pagination font properties*/
            }
        /*pagination font custom*/

        /*price font custom*/
            html body .ultimate-layouts-container .ultimate-layouts-woo-element .ultimate-layouts-woo-price-cart-block .ultimate-layouts-woo-price .amount,
            html body .ul-quick-view-style .ultimate-layouts-woo-element .ultimate-layouts-woo-price-cart-block .ultimate-layouts-woo-price .amount{
                /*price font properties (for Woo)*/
            }
        /*price font custom*/

        /*add to cart font custom*/
            html body .ultimate-layouts-container .ultimate-layouts-woo-element .ultimate-layouts-woo-price-cart-block .ultimate-layouts-woo-cart .add_to_cart_button,
            html body .ul-quick-view-style .ultimate-layouts-woo-element .ultimate-layouts-woo-price-cart-block .ultimate-layouts-woo-cart .add_to_cart_button{
                /*add to cart font properties (for Woo)*/
            }
        /*add to cart font custom*/

### Kodex Posts likes

1. Install Plugin Require (You need to install additional plugins "Kodex Posts likes" to be able to use the additional functions related to the button "like count"):
2. Install Plugin "Kodex Posts likes":
   - Step 1:
   - Step 2:
   - Step 3:
   - Step 4 - Settings: